/* 主题变量定义 */

/* 预设主题颜色 */
:root {
  /* 主题色预设 */
  --theme-blue: #1989fa;
  --theme-blue-rgb: 25, 137, 250;
  
  --theme-green: #07c160;
  --theme-green-rgb: 7, 193, 96;
  
  --theme-red: #ee0a24;
  --theme-red-rgb: 238, 10, 36;
  
  --theme-orange: #ff976a;
  --theme-orange-rgb: 255, 151, 106;
  
  --theme-purple: #8a2be2;
  --theme-purple-rgb: 138, 43, 226;
  
  --theme-pink: #ff6699;
  --theme-pink-rgb: 255, 102, 153;
  
  --theme-cyan: #1abc9c;
  --theme-cyan-rgb: 26, 188, 156;
  
  --theme-custom: #1989fa;
  --theme-custom-rgb: 25, 137, 250;
}

/* 浅色主题（默认） */
:root {
  /* 主色调 - 默认蓝色 */
  --primary-color: var(--theme-blue);
  --primary-color-rgb: var(--theme-blue-rgb);
  
  /* 功能色 */
  --success-color: #07c160;
  --warning-color: #ff976a;
  --danger-color: #ee0a24;
  --info-color: #909399;
  
  /* 背景色 */
  --background-color: #f7f8fa;
  --background-color-light: #ffffff;
  --background-color-card: #ffffff;
  
  /* 文本色 */
  --text-color: #323233;
  --text-color-secondary: #646566;
  --text-color-tertiary: #969799;
  --text-color-disabled: #c8c9cc;
  
  /* 边框色 */
  --border-color: #ebedf0;
  --border-color-light: #f2f3f5;
  --border-color-dark: #dcdee0;
  
  /* 阴影 */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-1: 0 1px 3px var(--shadow-color);
  --shadow-2: 0 2px 6px var(--shadow-color);
  --shadow-3: 0 3px 10px var(--shadow-color);
  
  /* 组件特定变量 */
  --navbar-height: 46px;
  --tabbar-height: 50px;
  --sidebar-width: 80px;
  --z-index-navbar: 1000;
  --z-index-tabbar: 1000;
  --z-index-modal: 1100;
  --z-index-popup: 1200;
  --z-index-toast: 1300;
  
  /* 过渡动画 */
  --transition-duration: 0.3s;
}

/* 深色主题 */
[data-theme='dark'] {
  /* 主色调保持不变 */
  
  /* 背景色 */
  --background-color: #121212;
  --background-color-light: #1e1e1e;
  --background-color-card: #2c2c2c;
  
  /* 文本色 */
  --text-color: #f5f5f5;
  --text-color-secondary: #e0e0e0;
  --text-color-tertiary: #b0b0b0;
  --text-color-disabled: #6e6e6e;
  
  /* 边框色 */
  --border-color: #3a3a3a;
  --border-color-light: #2a2a2a;
  --border-color-dark: #4a4a4a;
  
  /* 阴影 */
  --shadow-color: rgba(0, 0, 0, 0.3);
}

/* 绿色主题 */
[data-theme='green'] {
  --primary-color: var(--theme-green);
  --primary-color-rgb: var(--theme-green-rgb);
}

/* 红色主题 */
[data-theme='red'] {
  --primary-color: var(--theme-red);
  --primary-color-rgb: var(--theme-red-rgb);
}

/* 橙色主题 */
[data-theme='orange'] {
  --primary-color: var(--theme-orange);
  --primary-color-rgb: var(--theme-orange-rgb);
}

/* 紫色主题 */
[data-theme='purple'] {
  --primary-color: var(--theme-purple);
  --primary-color-rgb: var(--theme-purple-rgb);
}

/* 粉色主题 */
[data-theme='pink'] {
  --primary-color: var(--theme-pink);
  --primary-color-rgb: var(--theme-pink-rgb);
}

/* 青色主题 */
[data-theme='cyan'] {
  --primary-color: var(--theme-cyan);
  --primary-color-rgb: var(--theme-cyan-rgb);
}

/* 自定义主题 */
[data-theme='custom'] {
  --primary-color: var(--theme-custom);
  --primary-color-rgb: var(--theme-custom-rgb);
}

/* 媒体查询 - 深色模式自动适配 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* 背景色 */
    --background-color: #121212;
    --background-color-light: #1e1e1e;
    --background-color-card: #2c2c2c;
    
    /* 文本色 */
    --text-color: #f5f5f5;
    --text-color-secondary: #e0e0e0;
    --text-color-tertiary: #b0b0b0;
    --text-color-disabled: #6e6e6e;
    
    /* 边框色 */
    --border-color: #3a3a3a;
    --border-color-light: #2a2a2a;
    --border-color-dark: #4a4a4a;
    
    /* 阴影 */
    --shadow-color: rgba(0, 0, 0, 0.3);
  }
}

/* 主题切换过渡 */
:root, [data-theme] {
  transition: color var(--transition-duration),
              background-color var(--transition-duration),
              border-color var(--transition-duration),
              box-shadow var(--transition-duration);
}

/* 自定义背景图片主题 */
.custom-bg-theme {
  --background-image: none;
  
  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--background-image);
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
  }
} 